{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 1.气泡图"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 1.代码示例1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "    <div class=\"bk-root\">\n",
       "        <a href=\"https://bokeh.pydata.org\" target=\"_blank\" class=\"bk-logo bk-logo-small bk-logo-notebook\"></a>\n",
       "        <span id=\"1001\">Loading BokehJS ...</span>\n",
       "    </div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "(function(root) {\n",
       "  function now() {\n",
       "    return new Date();\n",
       "  }\n",
       "\n",
       "  var force = true;\n",
       "\n",
       "  if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n",
       "    root._bokeh_onload_callbacks = [];\n",
       "    root._bokeh_is_loading = undefined;\n",
       "  }\n",
       "\n",
       "  var JS_MIME_TYPE = 'application/javascript';\n",
       "  var HTML_MIME_TYPE = 'text/html';\n",
       "  var EXEC_MIME_TYPE = 'application/vnd.bokehjs_exec.v0+json';\n",
       "  var CLASS_NAME = 'output_bokeh rendered_html';\n",
       "\n",
       "  /**\n",
       "   * Render data to the DOM node\n",
       "   */\n",
       "  function render(props, node) {\n",
       "    var script = document.createElement(\"script\");\n",
       "    node.appendChild(script);\n",
       "  }\n",
       "\n",
       "  /**\n",
       "   * Handle when an output is cleared or removed\n",
       "   */\n",
       "  function handleClearOutput(event, handle) {\n",
       "    var cell = handle.cell;\n",
       "\n",
       "    var id = cell.output_area._bokeh_element_id;\n",
       "    var server_id = cell.output_area._bokeh_server_id;\n",
       "    // Clean up Bokeh references\n",
       "    if (id != null && id in Bokeh.index) {\n",
       "      Bokeh.index[id].model.document.clear();\n",
       "      delete Bokeh.index[id];\n",
       "    }\n",
       "\n",
       "    if (server_id !== undefined) {\n",
       "      // Clean up Bokeh references\n",
       "      var cmd = \"from bokeh.io.state import curstate; print(curstate().uuid_to_server['\" + server_id + \"'].get_sessions()[0].document.roots[0]._id)\";\n",
       "      cell.notebook.kernel.execute(cmd, {\n",
       "        iopub: {\n",
       "          output: function(msg) {\n",
       "            var id = msg.content.text.trim();\n",
       "            if (id in Bokeh.index) {\n",
       "              Bokeh.index[id].model.document.clear();\n",
       "              delete Bokeh.index[id];\n",
       "            }\n",
       "          }\n",
       "        }\n",
       "      });\n",
       "      // Destroy server and session\n",
       "      var cmd = \"import bokeh.io.notebook as ion; ion.destroy_server('\" + server_id + \"')\";\n",
       "      cell.notebook.kernel.execute(cmd);\n",
       "    }\n",
       "  }\n",
       "\n",
       "  /**\n",
       "   * Handle when a new output is added\n",
       "   */\n",
       "  function handleAddOutput(event, handle) {\n",
       "    var output_area = handle.output_area;\n",
       "    var output = handle.output;\n",
       "\n",
       "    // limit handleAddOutput to display_data with EXEC_MIME_TYPE content only\n",
       "    if ((output.output_type != \"display_data\") || (!output.data.hasOwnProperty(EXEC_MIME_TYPE))) {\n",
       "      return\n",
       "    }\n",
       "\n",
       "    var toinsert = output_area.element.find(\".\" + CLASS_NAME.split(' ')[0]);\n",
       "\n",
       "    if (output.metadata[EXEC_MIME_TYPE][\"id\"] !== undefined) {\n",
       "      toinsert[toinsert.length - 1].firstChild.textContent = output.data[JS_MIME_TYPE];\n",
       "      // store reference to embed id on output_area\n",
       "      output_area._bokeh_element_id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n",
       "    }\n",
       "    if (output.metadata[EXEC_MIME_TYPE][\"server_id\"] !== undefined) {\n",
       "      var bk_div = document.createElement(\"div\");\n",
       "      bk_div.innerHTML = output.data[HTML_MIME_TYPE];\n",
       "      var script_attrs = bk_div.children[0].attributes;\n",
       "      for (var i = 0; i < script_attrs.length; i++) {\n",
       "        toinsert[toinsert.length - 1].firstChild.setAttribute(script_attrs[i].name, script_attrs[i].value);\n",
       "      }\n",
       "      // store reference to server id on output_area\n",
       "      output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE][\"server_id\"];\n",
       "    }\n",
       "  }\n",
       "\n",
       "  function register_renderer(events, OutputArea) {\n",
       "\n",
       "    function append_mime(data, metadata, element) {\n",
       "      // create a DOM node to render to\n",
       "      var toinsert = this.create_output_subarea(\n",
       "        metadata,\n",
       "        CLASS_NAME,\n",
       "        EXEC_MIME_TYPE\n",
       "      );\n",
       "      this.keyboard_manager.register_events(toinsert);\n",
       "      // Render to node\n",
       "      var props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};\n",
       "      render(props, toinsert[toinsert.length - 1]);\n",
       "      element.append(toinsert);\n",
       "      return toinsert\n",
       "    }\n",
       "\n",
       "    /* Handle when an output is cleared or removed */\n",
       "    events.on('clear_output.CodeCell', handleClearOutput);\n",
       "    events.on('delete.Cell', handleClearOutput);\n",
       "\n",
       "    /* Handle when a new output is added */\n",
       "    events.on('output_added.OutputArea', handleAddOutput);\n",
       "\n",
       "    /**\n",
       "     * Register the mime type and append_mime function with output_area\n",
       "     */\n",
       "    OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n",
       "      /* Is output safe? */\n",
       "      safe: true,\n",
       "      /* Index of renderer in `output_area.display_order` */\n",
       "      index: 0\n",
       "    });\n",
       "  }\n",
       "\n",
       "  // register the mime type if in Jupyter Notebook environment and previously unregistered\n",
       "  if (root.Jupyter !== undefined) {\n",
       "    var events = require('base/js/events');\n",
       "    var OutputArea = require('notebook/js/outputarea').OutputArea;\n",
       "\n",
       "    if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n",
       "      register_renderer(events, OutputArea);\n",
       "    }\n",
       "  }\n",
       "\n",
       "  \n",
       "  if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n",
       "    root._bokeh_timeout = Date.now() + 5000;\n",
       "    root._bokeh_failed_load = false;\n",
       "  }\n",
       "\n",
       "  var NB_LOAD_WARNING = {'data': {'text/html':\n",
       "     \"<div style='background-color: #fdd'>\\n\"+\n",
       "     \"<p>\\n\"+\n",
       "     \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n",
       "     \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n",
       "     \"</p>\\n\"+\n",
       "     \"<ul>\\n\"+\n",
       "     \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n",
       "     \"<li>use INLINE resources instead, as so:</li>\\n\"+\n",
       "     \"</ul>\\n\"+\n",
       "     \"<code>\\n\"+\n",
       "     \"from bokeh.resources import INLINE\\n\"+\n",
       "     \"output_notebook(resources=INLINE)\\n\"+\n",
       "     \"</code>\\n\"+\n",
       "     \"</div>\"}};\n",
       "\n",
       "  function display_loaded() {\n",
       "    var el = document.getElementById(\"1001\");\n",
       "    if (el != null) {\n",
       "      el.textContent = \"BokehJS is loading...\";\n",
       "    }\n",
       "    if (root.Bokeh !== undefined) {\n",
       "      if (el != null) {\n",
       "        el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n",
       "      }\n",
       "    } else if (Date.now() < root._bokeh_timeout) {\n",
       "      setTimeout(display_loaded, 100)\n",
       "    }\n",
       "  }\n",
       "\n",
       "\n",
       "  function run_callbacks() {\n",
       "    try {\n",
       "      root._bokeh_onload_callbacks.forEach(function(callback) {\n",
       "        if (callback != null)\n",
       "          callback();\n",
       "      });\n",
       "    } finally {\n",
       "      delete root._bokeh_onload_callbacks\n",
       "    }\n",
       "    console.debug(\"Bokeh: all callbacks have finished\");\n",
       "  }\n",
       "\n",
       "  function load_libs(css_urls, js_urls, callback) {\n",
       "    if (css_urls == null) css_urls = [];\n",
       "    if (js_urls == null) js_urls = [];\n",
       "\n",
       "    root._bokeh_onload_callbacks.push(callback);\n",
       "    if (root._bokeh_is_loading > 0) {\n",
       "      console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n",
       "      return null;\n",
       "    }\n",
       "    if (js_urls == null || js_urls.length === 0) {\n",
       "      run_callbacks();\n",
       "      return null;\n",
       "    }\n",
       "    console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n",
       "    root._bokeh_is_loading = css_urls.length + js_urls.length;\n",
       "\n",
       "    function on_load() {\n",
       "      root._bokeh_is_loading--;\n",
       "      if (root._bokeh_is_loading === 0) {\n",
       "        console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n",
       "        run_callbacks()\n",
       "      }\n",
       "    }\n",
       "\n",
       "    function on_error() {\n",
       "      console.error(\"failed to load \" + url);\n",
       "    }\n",
       "\n",
       "    for (var i = 0; i < css_urls.length; i++) {\n",
       "      var url = css_urls[i];\n",
       "      const element = document.createElement(\"link\");\n",
       "      element.onload = on_load;\n",
       "      element.onerror = on_error;\n",
       "      element.rel = \"stylesheet\";\n",
       "      element.type = \"text/css\";\n",
       "      element.href = url;\n",
       "      console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n",
       "      document.body.appendChild(element);\n",
       "    }\n",
       "\n",
       "    for (var i = 0; i < js_urls.length; i++) {\n",
       "      var url = js_urls[i];\n",
       "      var element = document.createElement('script');\n",
       "      element.onload = on_load;\n",
       "      element.onerror = on_error;\n",
       "      element.async = false;\n",
       "      element.src = url;\n",
       "      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n",
       "      document.head.appendChild(element);\n",
       "    }\n",
       "  };var element = document.getElementById(\"1001\");\n",
       "  if (element == null) {\n",
       "    console.error(\"Bokeh: ERROR: autoload.js configured with elementid '1001' but no matching script tag was found. \")\n",
       "    return false;\n",
       "  }\n",
       "\n",
       "  function inject_raw_css(css) {\n",
       "    const element = document.createElement(\"style\");\n",
       "    element.appendChild(document.createTextNode(css));\n",
       "    document.body.appendChild(element);\n",
       "  }\n",
       "\n",
       "  var js_urls = [\"https://cdn.pydata.org/bokeh/release/bokeh-1.3.4.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-widgets-1.3.4.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-tables-1.3.4.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-gl-1.3.4.min.js\"];\n",
       "  var css_urls = [];\n",
       "\n",
       "  var inline_js = [\n",
       "    function(Bokeh) {\n",
       "      Bokeh.set_log_level(\"info\");\n",
       "    },\n",
       "    \n",
       "    function(Bokeh) {\n",
       "      \n",
       "    },\n",
       "    function(Bokeh) {} // ensure no trailing comma for IE\n",
       "  ];\n",
       "\n",
       "  function run_inline_js() {\n",
       "    \n",
       "    if ((root.Bokeh !== undefined) || (force === true)) {\n",
       "      for (var i = 0; i < inline_js.length; i++) {\n",
       "        inline_js[i].call(root, root.Bokeh);\n",
       "      }if (force === true) {\n",
       "        display_loaded();\n",
       "      }} else if (Date.now() < root._bokeh_timeout) {\n",
       "      setTimeout(run_inline_js, 100);\n",
       "    } else if (!root._bokeh_failed_load) {\n",
       "      console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n",
       "      root._bokeh_failed_load = true;\n",
       "    } else if (force !== true) {\n",
       "      var cell = $(document.getElementById(\"1001\")).parents('.cell').data().cell;\n",
       "      cell.output_area.append_execute_result(NB_LOAD_WARNING)\n",
       "    }\n",
       "\n",
       "  }\n",
       "\n",
       "  if (root._bokeh_is_loading === 0) {\n",
       "    console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n",
       "    run_inline_js();\n",
       "  } else {\n",
       "    load_libs(css_urls, js_urls, function() {\n",
       "      console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n",
       "      run_inline_js();\n",
       "    });\n",
       "  }\n",
       "}(window));"
      ],
      "application/vnd.bokehjs_load.v0+json": "\n(function(root) {\n  function now() {\n    return new Date();\n  }\n\n  var force = true;\n\n  if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n    root._bokeh_onload_callbacks = [];\n    root._bokeh_is_loading = undefined;\n  }\n\n  \n\n  \n  if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n    root._bokeh_timeout = Date.now() + 5000;\n    root._bokeh_failed_load = false;\n  }\n\n  var NB_LOAD_WARNING = {'data': {'text/html':\n     \"<div style='background-color: #fdd'>\\n\"+\n     \"<p>\\n\"+\n     \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n     \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n     \"</p>\\n\"+\n     \"<ul>\\n\"+\n     \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n     \"<li>use INLINE resources instead, as so:</li>\\n\"+\n     \"</ul>\\n\"+\n     \"<code>\\n\"+\n     \"from bokeh.resources import INLINE\\n\"+\n     \"output_notebook(resources=INLINE)\\n\"+\n     \"</code>\\n\"+\n     \"</div>\"}};\n\n  function display_loaded() {\n    var el = document.getElementById(\"1001\");\n    if (el != null) {\n      el.textContent = \"BokehJS is loading...\";\n    }\n    if (root.Bokeh !== undefined) {\n      if (el != null) {\n        el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n      }\n    } else if (Date.now() < root._bokeh_timeout) {\n      setTimeout(display_loaded, 100)\n    }\n  }\n\n\n  function run_callbacks() {\n    try {\n      root._bokeh_onload_callbacks.forEach(function(callback) {\n        if (callback != null)\n          callback();\n      });\n    } finally {\n      delete root._bokeh_onload_callbacks\n    }\n    console.debug(\"Bokeh: all callbacks have finished\");\n  }\n\n  function load_libs(css_urls, js_urls, callback) {\n    if (css_urls == null) css_urls = [];\n    if (js_urls == null) js_urls = [];\n\n    root._bokeh_onload_callbacks.push(callback);\n    if (root._bokeh_is_loading > 0) {\n      console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n      return null;\n    }\n    if (js_urls == null || js_urls.length === 0) {\n      run_callbacks();\n      return null;\n    }\n    console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n    root._bokeh_is_loading = css_urls.length + js_urls.length;\n\n    function on_load() {\n      root._bokeh_is_loading--;\n      if (root._bokeh_is_loading === 0) {\n        console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n        run_callbacks()\n      }\n    }\n\n    function on_error() {\n      console.error(\"failed to load \" + url);\n    }\n\n    for (var i = 0; i < css_urls.length; i++) {\n      var url = css_urls[i];\n      const element = document.createElement(\"link\");\n      element.onload = on_load;\n      element.onerror = on_error;\n      element.rel = \"stylesheet\";\n      element.type = \"text/css\";\n      element.href = url;\n      console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n      document.body.appendChild(element);\n    }\n\n    for (var i = 0; i < js_urls.length; i++) {\n      var url = js_urls[i];\n      var element = document.createElement('script');\n      element.onload = on_load;\n      element.onerror = on_error;\n      element.async = false;\n      element.src = url;\n      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n      document.head.appendChild(element);\n    }\n  };var element = document.getElementById(\"1001\");\n  if (element == null) {\n    console.error(\"Bokeh: ERROR: autoload.js configured with elementid '1001' but no matching script tag was found. \")\n    return false;\n  }\n\n  function inject_raw_css(css) {\n    const element = document.createElement(\"style\");\n    element.appendChild(document.createTextNode(css));\n    document.body.appendChild(element);\n  }\n\n  var js_urls = [\"https://cdn.pydata.org/bokeh/release/bokeh-1.3.4.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-widgets-1.3.4.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-tables-1.3.4.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-gl-1.3.4.min.js\"];\n  var css_urls = [];\n\n  var inline_js = [\n    function(Bokeh) {\n      Bokeh.set_log_level(\"info\");\n    },\n    \n    function(Bokeh) {\n      \n    },\n    function(Bokeh) {} // ensure no trailing comma for IE\n  ];\n\n  function run_inline_js() {\n    \n    if ((root.Bokeh !== undefined) || (force === true)) {\n      for (var i = 0; i < inline_js.length; i++) {\n        inline_js[i].call(root, root.Bokeh);\n      }if (force === true) {\n        display_loaded();\n      }} else if (Date.now() < root._bokeh_timeout) {\n      setTimeout(run_inline_js, 100);\n    } else if (!root._bokeh_failed_load) {\n      console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n      root._bokeh_failed_load = true;\n    } else if (force !== true) {\n      var cell = $(document.getElementById(\"1001\")).parents('.cell').data().cell;\n      cell.output_area.append_execute_result(NB_LOAD_WARNING)\n    }\n\n  }\n\n  if (root._bokeh_is_loading === 0) {\n    console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n    run_inline_js();\n  } else {\n    load_libs(css_urls, js_urls, function() {\n      console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n      run_inline_js();\n    });\n  }\n}(window));"
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# 准备工作\n",
    "from bokeh.plotting import figure,show,output_notebook\n",
    "output_notebook()\n",
    "import numpy as np"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "  <div class=\"bk-root\" id=\"57891704-24e9-47a1-aeb6-262167c19929\" data-root-id=\"1002\"></div>\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "(function(root) {\n",
       "  function embed_document(root) {\n",
       "    \n",
       "  var docs_json = {\"94d339e9-4faf-4a77-9b9c-f3831db72e16\":{\"roots\":{\"references\":[{\"attributes\":{\"below\":[{\"id\":\"1013\",\"type\":\"LinearAxis\"}],\"center\":[{\"id\":\"1017\",\"type\":\"Grid\"},{\"id\":\"1022\",\"type\":\"Grid\"}],\"left\":[{\"id\":\"1018\",\"type\":\"LinearAxis\"}],\"renderers\":[{\"id\":\"1039\",\"type\":\"GlyphRenderer\"}],\"title\":{\"id\":\"1003\",\"type\":\"Title\"},\"toolbar\":{\"id\":\"1029\",\"type\":\"Toolbar\"},\"x_range\":{\"id\":\"1005\",\"type\":\"DataRange1d\"},\"x_scale\":{\"id\":\"1009\",\"type\":\"LinearScale\"},\"y_range\":{\"id\":\"1007\",\"type\":\"DataRange1d\"},\"y_scale\":{\"id\":\"1011\",\"type\":\"LinearScale\"}},\"id\":\"1002\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{\"formatter\":{\"id\":\"1043\",\"type\":\"BasicTickFormatter\"},\"ticker\":{\"id\":\"1014\",\"type\":\"BasicTicker\"}},\"id\":\"1013\",\"type\":\"LinearAxis\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"#1f77b4\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"#1f77b4\"},\"size\":{\"field\":\"size\",\"units\":\"screen\"},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"1038\",\"type\":\"Scatter\"},{\"attributes\":{},\"id\":\"1045\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{},\"id\":\"1024\",\"type\":\"WheelZoomTool\"},{\"attributes\":{\"callback\":null},\"id\":\"1007\",\"type\":\"DataRange1d\"},{\"attributes\":{},\"id\":\"1046\",\"type\":\"UnionRenderers\"},{\"attributes\":{\"callback\":null},\"id\":\"1005\",\"type\":\"DataRange1d\"},{\"attributes\":{},\"id\":\"1009\",\"type\":\"LinearScale\"},{\"attributes\":{\"overlay\":{\"id\":\"1048\",\"type\":\"BoxAnnotation\"}},\"id\":\"1025\",\"type\":\"BoxZoomTool\"},{\"attributes\":{},\"id\":\"1047\",\"type\":\"Selection\"},{\"attributes\":{\"data_source\":{\"id\":\"1036\",\"type\":\"ColumnDataSource\"},\"glyph\":{\"id\":\"1037\",\"type\":\"Scatter\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"1038\",\"type\":\"Scatter\"},\"selection_glyph\":null,\"view\":{\"id\":\"1040\",\"type\":\"CDSView\"}},\"id\":\"1039\",\"type\":\"GlyphRenderer\"},{\"attributes\":{},\"id\":\"1011\",\"type\":\"LinearScale\"},{\"attributes\":{\"source\":{\"id\":\"1036\",\"type\":\"ColumnDataSource\"}},\"id\":\"1040\",\"type\":\"CDSView\"},{\"attributes\":{},\"id\":\"1026\",\"type\":\"SaveTool\"},{\"attributes\":{},\"id\":\"1027\",\"type\":\"ResetTool\"},{\"attributes\":{\"ticker\":{\"id\":\"1014\",\"type\":\"BasicTicker\"}},\"id\":\"1017\",\"type\":\"Grid\"},{\"attributes\":{},\"id\":\"1043\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"callback\":null,\"data\":{\"size\":{\"__ndarray__\":\"CgAAABQAAAAeAAAAKAAAAA==\",\"dtype\":\"int32\",\"shape\":[4]},\"x\":[1,2,3,4],\"y\":[2,4,6,8]},\"selected\":{\"id\":\"1047\",\"type\":\"Selection\"},\"selection_policy\":{\"id\":\"1046\",\"type\":\"UnionRenderers\"}},\"id\":\"1036\",\"type\":\"ColumnDataSource\"},{\"attributes\":{},\"id\":\"1014\",\"type\":\"BasicTicker\"},{\"attributes\":{\"fill_color\":{\"value\":\"navy\"},\"line_color\":{\"value\":\"navy\"},\"size\":{\"field\":\"size\",\"units\":\"screen\"},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"1037\",\"type\":\"Scatter\"},{\"attributes\":{},\"id\":\"1028\",\"type\":\"HelpTool\"},{\"attributes\":{\"formatter\":{\"id\":\"1045\",\"type\":\"BasicTickFormatter\"},\"ticker\":{\"id\":\"1019\",\"type\":\"BasicTicker\"}},\"id\":\"1018\",\"type\":\"LinearAxis\"},{\"attributes\":{\"dimension\":1,\"ticker\":{\"id\":\"1019\",\"type\":\"BasicTicker\"}},\"id\":\"1022\",\"type\":\"Grid\"},{\"attributes\":{\"text\":\"bubble chart\"},\"id\":\"1003\",\"type\":\"Title\"},{\"attributes\":{\"active_drag\":\"auto\",\"active_inspect\":\"auto\",\"active_multi\":null,\"active_scroll\":\"auto\",\"active_tap\":\"auto\",\"tools\":[{\"id\":\"1023\",\"type\":\"PanTool\"},{\"id\":\"1024\",\"type\":\"WheelZoomTool\"},{\"id\":\"1025\",\"type\":\"BoxZoomTool\"},{\"id\":\"1026\",\"type\":\"SaveTool\"},{\"id\":\"1027\",\"type\":\"ResetTool\"},{\"id\":\"1028\",\"type\":\"HelpTool\"}]},\"id\":\"1029\",\"type\":\"Toolbar\"},{\"attributes\":{},\"id\":\"1019\",\"type\":\"BasicTicker\"},{\"attributes\":{\"bottom_units\":\"screen\",\"fill_alpha\":{\"value\":0.5},\"fill_color\":{\"value\":\"lightgrey\"},\"left_units\":\"screen\",\"level\":\"overlay\",\"line_alpha\":{\"value\":1.0},\"line_color\":{\"value\":\"black\"},\"line_dash\":[4,4],\"line_width\":{\"value\":2},\"render_mode\":\"css\",\"right_units\":\"screen\",\"top_units\":\"screen\"},\"id\":\"1048\",\"type\":\"BoxAnnotation\"},{\"attributes\":{},\"id\":\"1023\",\"type\":\"PanTool\"}],\"root_ids\":[\"1002\"]},\"title\":\"Bokeh Application\",\"version\":\"1.3.4\"}};\n",
       "  var render_items = [{\"docid\":\"94d339e9-4faf-4a77-9b9c-f3831db72e16\",\"roots\":{\"1002\":\"57891704-24e9-47a1-aeb6-262167c19929\"}}];\n",
       "  root.Bokeh.embed.embed_items_notebook(docs_json, render_items);\n",
       "\n",
       "  }\n",
       "  if (root.Bokeh !== undefined) {\n",
       "    embed_document(root);\n",
       "  } else {\n",
       "    var attempts = 0;\n",
       "    var timer = setInterval(function(root) {\n",
       "      if (root.Bokeh !== undefined) {\n",
       "        embed_document(root);\n",
       "        clearInterval(timer);\n",
       "      }\n",
       "      attempts++;\n",
       "      if (attempts > 100) {\n",
       "        console.log(\"Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing\");\n",
       "        clearInterval(timer);\n",
       "      }\n",
       "    }, 10, root)\n",
       "  }\n",
       "})(window);"
      ],
      "application/vnd.bokehjs_exec.v0+json": ""
     },
     "metadata": {
      "application/vnd.bokehjs_exec.v0+json": {
       "id": "1002"
      }
     },
     "output_type": "display_data"
    }
   ],
   "source": [
    "# 简单气泡图\n",
    "x=[1,2,3,4]\n",
    "y=[2,4,6,8]\n",
    "sizes = np.array(y)*5 # 气泡大小\n",
    "p = figure(title=\"bubble chart\")\n",
    "p.scatter(x, y, marker=\"circle\", size=sizes, color=\"navy\",\n",
    "#     fill_color=None, line_width=2\n",
    "         )\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Using data directory: C:\\Users\\Lickry\\.bokeh\\data\n",
      "Downloading: CGM.csv (1589982 bytes)\n",
      "   1589982 [100.00%]\n",
      "Downloading: US_Counties.zip (3171836 bytes)\n",
      "   3171836 [100.00%]\n",
      "Unpacking: US_Counties.csv\n",
      "Downloading: us_cities.json (713565 bytes)\n",
      "    713565 [100.00%]\n",
      "Downloading: unemployment09.csv (253301 bytes)\n",
      "    253301 [100.00%]\n",
      "Downloading: AAPL.csv (166698 bytes)\n",
      "    166698 [100.00%]\n",
      "Downloading: FB.csv (9706 bytes)\n",
      "      9706 [100.00%]\n",
      "Downloading: GOOG.csv (113894 bytes)\n",
      "    113894 [100.00%]\n",
      "Downloading: IBM.csv (165625 bytes)\n",
      "    165625 [100.00%]\n",
      "Downloading: MSFT.csv (161614 bytes)\n",
      "    161614 [100.00%]\n",
      "Downloading: WPP2012_SA_DB03_POPULATION_QUINQUENNIAL.zip (4816256 bytes)\n",
      "   4816256 [100.00%]\n",
      "Unpacking: WPP2012_SA_DB03_POPULATION_QUINQUENNIAL.csv\n",
      "Downloading: gapminder_fertility.csv (64346 bytes)\n",
      "     64346 [100.00%]\n",
      "Downloading: gapminder_population.csv (94509 bytes)\n",
      "     94509 [100.00%]\n",
      "Downloading: gapminder_life_expectancy.csv (73243 bytes)\n",
      "     73243 [100.00%]\n",
      "Downloading: gapminder_regions.csv (7781 bytes)\n",
      "      7781 [100.00%]\n",
      "Downloading: world_cities.zip (645274 bytes)\n",
      "    645274 [100.00%]\n",
      "Unpacking: world_cities.csv\n",
      "Downloading: airports.json (6373 bytes)\n",
      "      6373 [100.00%]\n",
      "Downloading: movies.db.zip (5053420 bytes)\n",
      "   5053420 [100.00%]\n",
      "Unpacking: movies.db\n",
      "Downloading: airports.csv (203190 bytes)\n",
      "    203190 [100.00%]\n",
      "Downloading: routes.csv (377280 bytes)\n",
      "    377280 [100.00%]\n",
      "Downloading: haarcascade_frontalface_default.xml (930127 bytes)\n",
      "    930127 [100.00%]\n"
     ]
    }
   ],
   "source": [
    "import bokeh\n",
    "bokeh.sampledata.download()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "from bokeh.embed import file_html\n",
    "from bokeh.io import output_notebook, show\n",
    "from bokeh.layouts import layout\n",
    "from bokeh.models import (\n",
    "    ColumnDataSource, Plot, Circle, Range1d, LinearAxis, HoverTool, \n",
    "    Text, SingleIntervalTicker, Slider, CustomJS, Legend, LegendItem, CategoricalColorMapper)  # 底层样式\n",
    "from bokeh.palettes import Spectral6\n",
    "# from data import process_data\n",
    "import numpy as np"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [],
   "source": [
    "from bokeh.sampledata.gapminder import fertility, life_expectancy, population, regions"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>1964</th>\n",
       "      <th>1965</th>\n",
       "      <th>1966</th>\n",
       "      <th>1967</th>\n",
       "      <th>1968</th>\n",
       "      <th>1969</th>\n",
       "      <th>1970</th>\n",
       "      <th>1971</th>\n",
       "      <th>1972</th>\n",
       "      <th>1973</th>\n",
       "      <th>...</th>\n",
       "      <th>2004</th>\n",
       "      <th>2005</th>\n",
       "      <th>2006</th>\n",
       "      <th>2007</th>\n",
       "      <th>2008</th>\n",
       "      <th>2009</th>\n",
       "      <th>2010</th>\n",
       "      <th>2011</th>\n",
       "      <th>2012</th>\n",
       "      <th>2013</th>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>Country</th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <td>Afghanistan</td>\n",
       "      <td>7.671</td>\n",
       "      <td>7.671</td>\n",
       "      <td>7.671</td>\n",
       "      <td>7.671</td>\n",
       "      <td>7.671</td>\n",
       "      <td>7.671</td>\n",
       "      <td>7.671</td>\n",
       "      <td>7.671</td>\n",
       "      <td>7.671</td>\n",
       "      <td>7.671</td>\n",
       "      <td>...</td>\n",
       "      <td>7.136</td>\n",
       "      <td>6.930</td>\n",
       "      <td>6.702</td>\n",
       "      <td>6.456</td>\n",
       "      <td>6.196</td>\n",
       "      <td>5.928</td>\n",
       "      <td>5.659</td>\n",
       "      <td>5.395</td>\n",
       "      <td>5.141</td>\n",
       "      <td>4.900</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td>Albania</td>\n",
       "      <td>5.711</td>\n",
       "      <td>5.594</td>\n",
       "      <td>5.483</td>\n",
       "      <td>5.376</td>\n",
       "      <td>5.268</td>\n",
       "      <td>5.160</td>\n",
       "      <td>5.050</td>\n",
       "      <td>4.933</td>\n",
       "      <td>4.809</td>\n",
       "      <td>4.677</td>\n",
       "      <td>...</td>\n",
       "      <td>2.004</td>\n",
       "      <td>1.919</td>\n",
       "      <td>1.849</td>\n",
       "      <td>1.796</td>\n",
       "      <td>1.761</td>\n",
       "      <td>1.744</td>\n",
       "      <td>1.741</td>\n",
       "      <td>1.748</td>\n",
       "      <td>1.760</td>\n",
       "      <td>1.771</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td>Algeria</td>\n",
       "      <td>7.653</td>\n",
       "      <td>7.655</td>\n",
       "      <td>7.657</td>\n",
       "      <td>7.658</td>\n",
       "      <td>7.657</td>\n",
       "      <td>7.652</td>\n",
       "      <td>7.641</td>\n",
       "      <td>7.622</td>\n",
       "      <td>7.591</td>\n",
       "      <td>7.548</td>\n",
       "      <td>...</td>\n",
       "      <td>2.448</td>\n",
       "      <td>2.507</td>\n",
       "      <td>2.580</td>\n",
       "      <td>2.656</td>\n",
       "      <td>2.725</td>\n",
       "      <td>2.781</td>\n",
       "      <td>2.817</td>\n",
       "      <td>2.829</td>\n",
       "      <td>2.820</td>\n",
       "      <td>2.795</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td>American Samoa</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>...</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td>Andorra</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>...</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td>Virgin Islands (U.S.)</td>\n",
       "      <td>5.698</td>\n",
       "      <td>5.679</td>\n",
       "      <td>5.634</td>\n",
       "      <td>5.561</td>\n",
       "      <td>5.459</td>\n",
       "      <td>5.328</td>\n",
       "      <td>5.167</td>\n",
       "      <td>4.976</td>\n",
       "      <td>4.760</td>\n",
       "      <td>4.527</td>\n",
       "      <td>...</td>\n",
       "      <td>2.219</td>\n",
       "      <td>2.278</td>\n",
       "      <td>2.337</td>\n",
       "      <td>2.391</td>\n",
       "      <td>2.438</td>\n",
       "      <td>2.472</td>\n",
       "      <td>2.493</td>\n",
       "      <td>2.501</td>\n",
       "      <td>2.497</td>\n",
       "      <td>2.487</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td>Yemen, Rep.</td>\n",
       "      <td>7.385</td>\n",
       "      <td>7.418</td>\n",
       "      <td>7.447</td>\n",
       "      <td>7.471</td>\n",
       "      <td>7.491</td>\n",
       "      <td>7.512</td>\n",
       "      <td>7.542</td>\n",
       "      <td>7.593</td>\n",
       "      <td>7.672</td>\n",
       "      <td>7.782</td>\n",
       "      <td>...</td>\n",
       "      <td>5.588</td>\n",
       "      <td>5.393</td>\n",
       "      <td>5.199</td>\n",
       "      <td>5.010</td>\n",
       "      <td>4.829</td>\n",
       "      <td>4.658</td>\n",
       "      <td>4.498</td>\n",
       "      <td>4.348</td>\n",
       "      <td>4.207</td>\n",
       "      <td>4.075</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td>Zambia</td>\n",
       "      <td>7.240</td>\n",
       "      <td>7.292</td>\n",
       "      <td>7.338</td>\n",
       "      <td>7.376</td>\n",
       "      <td>7.405</td>\n",
       "      <td>7.425</td>\n",
       "      <td>7.437</td>\n",
       "      <td>7.443</td>\n",
       "      <td>7.446</td>\n",
       "      <td>7.447</td>\n",
       "      <td>...</td>\n",
       "      <td>5.974</td>\n",
       "      <td>5.954</td>\n",
       "      <td>5.932</td>\n",
       "      <td>5.908</td>\n",
       "      <td>5.881</td>\n",
       "      <td>5.849</td>\n",
       "      <td>5.813</td>\n",
       "      <td>5.773</td>\n",
       "      <td>5.731</td>\n",
       "      <td>5.687</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td>Zimbabwe</td>\n",
       "      <td>7.347</td>\n",
       "      <td>7.373</td>\n",
       "      <td>7.391</td>\n",
       "      <td>7.403</td>\n",
       "      <td>7.411</td>\n",
       "      <td>7.415</td>\n",
       "      <td>7.417</td>\n",
       "      <td>7.419</td>\n",
       "      <td>7.420</td>\n",
       "      <td>7.417</td>\n",
       "      <td>...</td>\n",
       "      <td>3.987</td>\n",
       "      <td>3.969</td>\n",
       "      <td>3.941</td>\n",
       "      <td>3.903</td>\n",
       "      <td>3.853</td>\n",
       "      <td>3.792</td>\n",
       "      <td>3.721</td>\n",
       "      <td>3.643</td>\n",
       "      <td>3.564</td>\n",
       "      <td>3.486</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td>Åland</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>...</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "<p>244 rows × 50 columns</p>\n",
       "</div>"
      ],
      "text/plain": [
       "                        1964   1965   1966   1967   1968   1969   1970   1971  \\\n",
       "Country                                                                         \n",
       "Afghanistan            7.671  7.671  7.671  7.671  7.671  7.671  7.671  7.671   \n",
       "Albania                5.711  5.594  5.483  5.376  5.268  5.160  5.050  4.933   \n",
       "Algeria                7.653  7.655  7.657  7.658  7.657  7.652  7.641  7.622   \n",
       "American Samoa           NaN    NaN    NaN    NaN    NaN    NaN    NaN    NaN   \n",
       "Andorra                  NaN    NaN    NaN    NaN    NaN    NaN    NaN    NaN   \n",
       "...                      ...    ...    ...    ...    ...    ...    ...    ...   \n",
       "Virgin Islands (U.S.)  5.698  5.679  5.634  5.561  5.459  5.328  5.167  4.976   \n",
       "Yemen, Rep.            7.385  7.418  7.447  7.471  7.491  7.512  7.542  7.593   \n",
       "Zambia                 7.240  7.292  7.338  7.376  7.405  7.425  7.437  7.443   \n",
       "Zimbabwe               7.347  7.373  7.391  7.403  7.411  7.415  7.417  7.419   \n",
       "Åland                    NaN    NaN    NaN    NaN    NaN    NaN    NaN    NaN   \n",
       "\n",
       "                        1972   1973  ...   2004   2005   2006   2007   2008  \\\n",
       "Country                              ...                                      \n",
       "Afghanistan            7.671  7.671  ...  7.136  6.930  6.702  6.456  6.196   \n",
       "Albania                4.809  4.677  ...  2.004  1.919  1.849  1.796  1.761   \n",
       "Algeria                7.591  7.548  ...  2.448  2.507  2.580  2.656  2.725   \n",
       "American Samoa           NaN    NaN  ...    NaN    NaN    NaN    NaN    NaN   \n",
       "Andorra                  NaN    NaN  ...    NaN    NaN    NaN    NaN    NaN   \n",
       "...                      ...    ...  ...    ...    ...    ...    ...    ...   \n",
       "Virgin Islands (U.S.)  4.760  4.527  ...  2.219  2.278  2.337  2.391  2.438   \n",
       "Yemen, Rep.            7.672  7.782  ...  5.588  5.393  5.199  5.010  4.829   \n",
       "Zambia                 7.446  7.447  ...  5.974  5.954  5.932  5.908  5.881   \n",
       "Zimbabwe               7.420  7.417  ...  3.987  3.969  3.941  3.903  3.853   \n",
       "Åland                    NaN    NaN  ...    NaN    NaN    NaN    NaN    NaN   \n",
       "\n",
       "                        2009   2010   2011   2012   2013  \n",
       "Country                                                   \n",
       "Afghanistan            5.928  5.659  5.395  5.141  4.900  \n",
       "Albania                1.744  1.741  1.748  1.760  1.771  \n",
       "Algeria                2.781  2.817  2.829  2.820  2.795  \n",
       "American Samoa           NaN    NaN    NaN    NaN    NaN  \n",
       "Andorra                  NaN    NaN    NaN    NaN    NaN  \n",
       "...                      ...    ...    ...    ...    ...  \n",
       "Virgin Islands (U.S.)  2.472  2.493  2.501  2.497  2.487  \n",
       "Yemen, Rep.            4.658  4.498  4.348  4.207  4.075  \n",
       "Zambia                 5.849  5.813  5.773  5.731  5.687  \n",
       "Zimbabwe               3.792  3.721  3.643  3.564  3.486  \n",
       "Åland                    NaN    NaN    NaN    NaN    NaN  \n",
       "\n",
       "[244 rows x 50 columns]"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "fertility"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [],
   "source": [
    " columns = list(fertility.columns)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "['1964',\n",
       " '1965',\n",
       " '1966',\n",
       " '1967',\n",
       " '1968',\n",
       " '1969',\n",
       " '1970',\n",
       " '1971',\n",
       " '1972',\n",
       " '1973',\n",
       " '1974',\n",
       " '1975',\n",
       " '1976',\n",
       " '1977',\n",
       " '1978',\n",
       " '1979',\n",
       " '1980',\n",
       " '1981',\n",
       " '1982',\n",
       " '1983',\n",
       " '1984',\n",
       " '1985',\n",
       " '1986',\n",
       " '1987',\n",
       " '1988',\n",
       " '1989',\n",
       " '1990',\n",
       " '1991',\n",
       " '1992',\n",
       " '1993',\n",
       " '1994',\n",
       " '1995',\n",
       " '1996',\n",
       " '1997',\n",
       " '1998',\n",
       " '1999',\n",
       " '2000',\n",
       " '2001',\n",
       " '2002',\n",
       " '2003',\n",
       " '2004',\n",
       " '2005',\n",
       " '2006',\n",
       " '2007',\n",
       " '2008',\n",
       " '2009',\n",
       " '2010',\n",
       " '2011',\n",
       " '2012',\n",
       " '2013']"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    " columns "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [],
   "source": [
    "years = list(range(int(columns[0]), int(columns[-1])))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[1964,\n",
       " 1965,\n",
       " 1966,\n",
       " 1967,\n",
       " 1968,\n",
       " 1969,\n",
       " 1970,\n",
       " 1971,\n",
       " 1972,\n",
       " 1973,\n",
       " 1974,\n",
       " 1975,\n",
       " 1976,\n",
       " 1977,\n",
       " 1978,\n",
       " 1979,\n",
       " 1980,\n",
       " 1981,\n",
       " 1982,\n",
       " 1983,\n",
       " 1984,\n",
       " 1985,\n",
       " 1986,\n",
       " 1987,\n",
       " 1988,\n",
       " 1989,\n",
       " 1990,\n",
       " 1991,\n",
       " 1992,\n",
       " 1993,\n",
       " 1994,\n",
       " 1995,\n",
       " 1996,\n",
       " 1997,\n",
       " 1998,\n",
       " 1999,\n",
       " 2000,\n",
       " 2001,\n",
       " 2002,\n",
       " 2003,\n",
       " 2004,\n",
       " 2005,\n",
       " 2006,\n",
       " 2007,\n",
       " 2008,\n",
       " 2009,\n",
       " 2010,\n",
       " 2011,\n",
       " 2012]"
      ]
     },
     "execution_count": 10,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "years"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "{'1964': 1964,\n",
       " '1965': 1965,\n",
       " '1966': 1966,\n",
       " '1967': 1967,\n",
       " '1968': 1968,\n",
       " '1969': 1969,\n",
       " '1970': 1970,\n",
       " '1971': 1971,\n",
       " '1972': 1972,\n",
       " '1973': 1973,\n",
       " '1974': 1974,\n",
       " '1975': 1975,\n",
       " '1976': 1976,\n",
       " '1977': 1977,\n",
       " '1978': 1978,\n",
       " '1979': 1979,\n",
       " '1980': 1980,\n",
       " '1981': 1981,\n",
       " '1982': 1982,\n",
       " '1983': 1983,\n",
       " '1984': 1984,\n",
       " '1985': 1985,\n",
       " '1986': 1986,\n",
       " '1987': 1987,\n",
       " '1988': 1988,\n",
       " '1989': 1989,\n",
       " '1990': 1990,\n",
       " '1991': 1991,\n",
       " '1992': 1992,\n",
       " '1993': 1993,\n",
       " '1994': 1994,\n",
       " '1995': 1995,\n",
       " '1996': 1996,\n",
       " '1997': 1997,\n",
       " '1998': 1998,\n",
       " '1999': 1999,\n",
       " '2000': 2000,\n",
       " '2001': 2001,\n",
       " '2002': 2002,\n",
       " '2003': 2003,\n",
       " '2004': 2004,\n",
       " '2005': 2005,\n",
       " '2006': 2006,\n",
       " '2007': 2007,\n",
       " '2008': 2008,\n",
       " '2009': 2009,\n",
       " '2010': 2010,\n",
       " '2011': 2011,\n",
       " '2012': 2012}"
      ]
     },
     "execution_count": 11,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "rename_dict = dict(zip(columns, years))\n",
    "rename_dict"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>1964</th>\n",
       "      <th>1965</th>\n",
       "      <th>1966</th>\n",
       "      <th>1967</th>\n",
       "      <th>1968</th>\n",
       "      <th>1969</th>\n",
       "      <th>1970</th>\n",
       "      <th>1971</th>\n",
       "      <th>1972</th>\n",
       "      <th>1973</th>\n",
       "      <th>...</th>\n",
       "      <th>2004</th>\n",
       "      <th>2005</th>\n",
       "      <th>2006</th>\n",
       "      <th>2007</th>\n",
       "      <th>2008</th>\n",
       "      <th>2009</th>\n",
       "      <th>2010</th>\n",
       "      <th>2011</th>\n",
       "      <th>2012</th>\n",
       "      <th>2013</th>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>Country</th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <td>Afghanistan</td>\n",
       "      <td>7.671</td>\n",
       "      <td>7.671</td>\n",
       "      <td>7.671</td>\n",
       "      <td>7.671</td>\n",
       "      <td>7.671</td>\n",
       "      <td>7.671</td>\n",
       "      <td>7.671</td>\n",
       "      <td>7.671</td>\n",
       "      <td>7.671</td>\n",
       "      <td>7.671</td>\n",
       "      <td>...</td>\n",
       "      <td>7.136</td>\n",
       "      <td>6.930</td>\n",
       "      <td>6.702</td>\n",
       "      <td>6.456</td>\n",
       "      <td>6.196</td>\n",
       "      <td>5.928</td>\n",
       "      <td>5.659</td>\n",
       "      <td>5.395</td>\n",
       "      <td>5.141</td>\n",
       "      <td>4.900</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td>Albania</td>\n",
       "      <td>5.711</td>\n",
       "      <td>5.594</td>\n",
       "      <td>5.483</td>\n",
       "      <td>5.376</td>\n",
       "      <td>5.268</td>\n",
       "      <td>5.160</td>\n",
       "      <td>5.050</td>\n",
       "      <td>4.933</td>\n",
       "      <td>4.809</td>\n",
       "      <td>4.677</td>\n",
       "      <td>...</td>\n",
       "      <td>2.004</td>\n",
       "      <td>1.919</td>\n",
       "      <td>1.849</td>\n",
       "      <td>1.796</td>\n",
       "      <td>1.761</td>\n",
       "      <td>1.744</td>\n",
       "      <td>1.741</td>\n",
       "      <td>1.748</td>\n",
       "      <td>1.760</td>\n",
       "      <td>1.771</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td>Algeria</td>\n",
       "      <td>7.653</td>\n",
       "      <td>7.655</td>\n",
       "      <td>7.657</td>\n",
       "      <td>7.658</td>\n",
       "      <td>7.657</td>\n",
       "      <td>7.652</td>\n",
       "      <td>7.641</td>\n",
       "      <td>7.622</td>\n",
       "      <td>7.591</td>\n",
       "      <td>7.548</td>\n",
       "      <td>...</td>\n",
       "      <td>2.448</td>\n",
       "      <td>2.507</td>\n",
       "      <td>2.580</td>\n",
       "      <td>2.656</td>\n",
       "      <td>2.725</td>\n",
       "      <td>2.781</td>\n",
       "      <td>2.817</td>\n",
       "      <td>2.829</td>\n",
       "      <td>2.820</td>\n",
       "      <td>2.795</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td>American Samoa</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>...</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td>Andorra</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>...</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td>Virgin Islands (U.S.)</td>\n",
       "      <td>5.698</td>\n",
       "      <td>5.679</td>\n",
       "      <td>5.634</td>\n",
       "      <td>5.561</td>\n",
       "      <td>5.459</td>\n",
       "      <td>5.328</td>\n",
       "      <td>5.167</td>\n",
       "      <td>4.976</td>\n",
       "      <td>4.760</td>\n",
       "      <td>4.527</td>\n",
       "      <td>...</td>\n",
       "      <td>2.219</td>\n",
       "      <td>2.278</td>\n",
       "      <td>2.337</td>\n",
       "      <td>2.391</td>\n",
       "      <td>2.438</td>\n",
       "      <td>2.472</td>\n",
       "      <td>2.493</td>\n",
       "      <td>2.501</td>\n",
       "      <td>2.497</td>\n",
       "      <td>2.487</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td>Yemen, Rep.</td>\n",
       "      <td>7.385</td>\n",
       "      <td>7.418</td>\n",
       "      <td>7.447</td>\n",
       "      <td>7.471</td>\n",
       "      <td>7.491</td>\n",
       "      <td>7.512</td>\n",
       "      <td>7.542</td>\n",
       "      <td>7.593</td>\n",
       "      <td>7.672</td>\n",
       "      <td>7.782</td>\n",
       "      <td>...</td>\n",
       "      <td>5.588</td>\n",
       "      <td>5.393</td>\n",
       "      <td>5.199</td>\n",
       "      <td>5.010</td>\n",
       "      <td>4.829</td>\n",
       "      <td>4.658</td>\n",
       "      <td>4.498</td>\n",
       "      <td>4.348</td>\n",
       "      <td>4.207</td>\n",
       "      <td>4.075</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td>Zambia</td>\n",
       "      <td>7.240</td>\n",
       "      <td>7.292</td>\n",
       "      <td>7.338</td>\n",
       "      <td>7.376</td>\n",
       "      <td>7.405</td>\n",
       "      <td>7.425</td>\n",
       "      <td>7.437</td>\n",
       "      <td>7.443</td>\n",
       "      <td>7.446</td>\n",
       "      <td>7.447</td>\n",
       "      <td>...</td>\n",
       "      <td>5.974</td>\n",
       "      <td>5.954</td>\n",
       "      <td>5.932</td>\n",
       "      <td>5.908</td>\n",
       "      <td>5.881</td>\n",
       "      <td>5.849</td>\n",
       "      <td>5.813</td>\n",
       "      <td>5.773</td>\n",
       "      <td>5.731</td>\n",
       "      <td>5.687</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td>Zimbabwe</td>\n",
       "      <td>7.347</td>\n",
       "      <td>7.373</td>\n",
       "      <td>7.391</td>\n",
       "      <td>7.403</td>\n",
       "      <td>7.411</td>\n",
       "      <td>7.415</td>\n",
       "      <td>7.417</td>\n",
       "      <td>7.419</td>\n",
       "      <td>7.420</td>\n",
       "      <td>7.417</td>\n",
       "      <td>...</td>\n",
       "      <td>3.987</td>\n",
       "      <td>3.969</td>\n",
       "      <td>3.941</td>\n",
       "      <td>3.903</td>\n",
       "      <td>3.853</td>\n",
       "      <td>3.792</td>\n",
       "      <td>3.721</td>\n",
       "      <td>3.643</td>\n",
       "      <td>3.564</td>\n",
       "      <td>3.486</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <td>Åland</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>...</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "<p>244 rows × 50 columns</p>\n",
       "</div>"
      ],
      "text/plain": [
       "                        1964   1965   1966   1967   1968   1969   1970   1971  \\\n",
       "Country                                                                         \n",
       "Afghanistan            7.671  7.671  7.671  7.671  7.671  7.671  7.671  7.671   \n",
       "Albania                5.711  5.594  5.483  5.376  5.268  5.160  5.050  4.933   \n",
       "Algeria                7.653  7.655  7.657  7.658  7.657  7.652  7.641  7.622   \n",
       "American Samoa           NaN    NaN    NaN    NaN    NaN    NaN    NaN    NaN   \n",
       "Andorra                  NaN    NaN    NaN    NaN    NaN    NaN    NaN    NaN   \n",
       "...                      ...    ...    ...    ...    ...    ...    ...    ...   \n",
       "Virgin Islands (U.S.)  5.698  5.679  5.634  5.561  5.459  5.328  5.167  4.976   \n",
       "Yemen, Rep.            7.385  7.418  7.447  7.471  7.491  7.512  7.542  7.593   \n",
       "Zambia                 7.240  7.292  7.338  7.376  7.405  7.425  7.437  7.443   \n",
       "Zimbabwe               7.347  7.373  7.391  7.403  7.411  7.415  7.417  7.419   \n",
       "Åland                    NaN    NaN    NaN    NaN    NaN    NaN    NaN    NaN   \n",
       "\n",
       "                        1972   1973  ...   2004   2005   2006   2007   2008  \\\n",
       "Country                              ...                                      \n",
       "Afghanistan            7.671  7.671  ...  7.136  6.930  6.702  6.456  6.196   \n",
       "Albania                4.809  4.677  ...  2.004  1.919  1.849  1.796  1.761   \n",
       "Algeria                7.591  7.548  ...  2.448  2.507  2.580  2.656  2.725   \n",
       "American Samoa           NaN    NaN  ...    NaN    NaN    NaN    NaN    NaN   \n",
       "Andorra                  NaN    NaN  ...    NaN    NaN    NaN    NaN    NaN   \n",
       "...                      ...    ...  ...    ...    ...    ...    ...    ...   \n",
       "Virgin Islands (U.S.)  4.760  4.527  ...  2.219  2.278  2.337  2.391  2.438   \n",
       "Yemen, Rep.            7.672  7.782  ...  5.588  5.393  5.199  5.010  4.829   \n",
       "Zambia                 7.446  7.447  ...  5.974  5.954  5.932  5.908  5.881   \n",
       "Zimbabwe               7.420  7.417  ...  3.987  3.969  3.941  3.903  3.853   \n",
       "Åland                    NaN    NaN  ...    NaN    NaN    NaN    NaN    NaN   \n",
       "\n",
       "                        2009   2010   2011   2012   2013  \n",
       "Country                                                   \n",
       "Afghanistan            5.928  5.659  5.395  5.141  4.900  \n",
       "Albania                1.744  1.741  1.748  1.760  1.771  \n",
       "Algeria                2.781  2.817  2.829  2.820  2.795  \n",
       "American Samoa           NaN    NaN    NaN    NaN    NaN  \n",
       "Andorra                  NaN    NaN    NaN    NaN    NaN  \n",
       "...                      ...    ...    ...    ...    ...  \n",
       "Virgin Islands (U.S.)  2.472  2.493  2.501  2.497  2.487  \n",
       "Yemen, Rep.            4.658  4.498  4.348  4.207  4.075  \n",
       "Zambia                 5.849  5.813  5.773  5.731  5.687  \n",
       "Zimbabwe               3.792  3.721  3.643  3.564  3.486  \n",
       "Åland                    NaN    NaN    NaN    NaN    NaN  \n",
       "\n",
       "[244 rows x 50 columns]"
      ]
     },
     "execution_count": 12,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "fertility = fertility.rename(columns=rename_dict)\n",
    "fertility "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [],
   "source": [
    "# 画布参数\n",
    "xdr = Range1d(1, 9)\n",
    "ydr = Range1d(20, 100)\n",
    "plot = Plot(\n",
    "    x_range=xdr,\n",
    "    y_range=ydr,\n",
    "    plot_width=800,\n",
    "    plot_height=400,\n",
    "    outline_line_color=None,\n",
    "    toolbar_location=None, \n",
    "    min_border=20,\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [],
   "source": [
    "# 坐标轴参数\n",
    "AXIS_FORMATS = dict(\n",
    "    minor_tick_in=None,\n",
    "    minor_tick_out=None,\n",
    "    major_tick_in=None,\n",
    "    major_label_text_font_size=\"10pt\",\n",
    "    major_label_text_font_style=\"normal\",\n",
    "    axis_label_text_font_size=\"10pt\",\n",
    "\n",
    "    axis_line_color='#AAAAAA',\n",
    "    major_tick_line_color='#AAAAAA',\n",
    "    major_label_text_color='#666666',\n",
    "\n",
    "    major_tick_line_cap=\"round\",\n",
    "    axis_line_cap=\"round\",\n",
    "    axis_line_width=1,\n",
    "    major_tick_line_width=1,\n",
    ")\n",
    "xaxis = LinearAxis(ticker=SingleIntervalTicker(interval=1), axis_label=\"Children per woman (total fertility)\")\n",
    "yaxis = LinearAxis(ticker=SingleIntervalTicker(interval=20), axis_label=\"Life expectancy at birth (years)\")   \n",
    "plot.add_layout(xaxis, 'below')\n",
    "plot.add_layout(yaxis, 'left')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "    <div class=\"bk-root\">\n",
       "        <a href=\"https://bokeh.pydata.org\" target=\"_blank\" class=\"bk-logo bk-logo-small bk-logo-notebook\"></a>\n",
       "        <span id=\"1108\">Loading BokehJS ...</span>\n",
       "    </div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "(function(root) {\n",
       "  function now() {\n",
       "    return new Date();\n",
       "  }\n",
       "\n",
       "  var force = true;\n",
       "\n",
       "  if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n",
       "    root._bokeh_onload_callbacks = [];\n",
       "    root._bokeh_is_loading = undefined;\n",
       "  }\n",
       "\n",
       "  var JS_MIME_TYPE = 'application/javascript';\n",
       "  var HTML_MIME_TYPE = 'text/html';\n",
       "  var EXEC_MIME_TYPE = 'application/vnd.bokehjs_exec.v0+json';\n",
       "  var CLASS_NAME = 'output_bokeh rendered_html';\n",
       "\n",
       "  /**\n",
       "   * Render data to the DOM node\n",
       "   */\n",
       "  function render(props, node) {\n",
       "    var script = document.createElement(\"script\");\n",
       "    node.appendChild(script);\n",
       "  }\n",
       "\n",
       "  /**\n",
       "   * Handle when an output is cleared or removed\n",
       "   */\n",
       "  function handleClearOutput(event, handle) {\n",
       "    var cell = handle.cell;\n",
       "\n",
       "    var id = cell.output_area._bokeh_element_id;\n",
       "    var server_id = cell.output_area._bokeh_server_id;\n",
       "    // Clean up Bokeh references\n",
       "    if (id != null && id in Bokeh.index) {\n",
       "      Bokeh.index[id].model.document.clear();\n",
       "      delete Bokeh.index[id];\n",
       "    }\n",
       "\n",
       "    if (server_id !== undefined) {\n",
       "      // Clean up Bokeh references\n",
       "      var cmd = \"from bokeh.io.state import curstate; print(curstate().uuid_to_server['\" + server_id + \"'].get_sessions()[0].document.roots[0]._id)\";\n",
       "      cell.notebook.kernel.execute(cmd, {\n",
       "        iopub: {\n",
       "          output: function(msg) {\n",
       "            var id = msg.content.text.trim();\n",
       "            if (id in Bokeh.index) {\n",
       "              Bokeh.index[id].model.document.clear();\n",
       "              delete Bokeh.index[id];\n",
       "            }\n",
       "          }\n",
       "        }\n",
       "      });\n",
       "      // Destroy server and session\n",
       "      var cmd = \"import bokeh.io.notebook as ion; ion.destroy_server('\" + server_id + \"')\";\n",
       "      cell.notebook.kernel.execute(cmd);\n",
       "    }\n",
       "  }\n",
       "\n",
       "  /**\n",
       "   * Handle when a new output is added\n",
       "   */\n",
       "  function handleAddOutput(event, handle) {\n",
       "    var output_area = handle.output_area;\n",
       "    var output = handle.output;\n",
       "\n",
       "    // limit handleAddOutput to display_data with EXEC_MIME_TYPE content only\n",
       "    if ((output.output_type != \"display_data\") || (!output.data.hasOwnProperty(EXEC_MIME_TYPE))) {\n",
       "      return\n",
       "    }\n",
       "\n",
       "    var toinsert = output_area.element.find(\".\" + CLASS_NAME.split(' ')[0]);\n",
       "\n",
       "    if (output.metadata[EXEC_MIME_TYPE][\"id\"] !== undefined) {\n",
       "      toinsert[toinsert.length - 1].firstChild.textContent = output.data[JS_MIME_TYPE];\n",
       "      // store reference to embed id on output_area\n",
       "      output_area._bokeh_element_id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n",
       "    }\n",
       "    if (output.metadata[EXEC_MIME_TYPE][\"server_id\"] !== undefined) {\n",
       "      var bk_div = document.createElement(\"div\");\n",
       "      bk_div.innerHTML = output.data[HTML_MIME_TYPE];\n",
       "      var script_attrs = bk_div.children[0].attributes;\n",
       "      for (var i = 0; i < script_attrs.length; i++) {\n",
       "        toinsert[toinsert.length - 1].firstChild.setAttribute(script_attrs[i].name, script_attrs[i].value);\n",
       "      }\n",
       "      // store reference to server id on output_area\n",
       "      output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE][\"server_id\"];\n",
       "    }\n",
       "  }\n",
       "\n",
       "  function register_renderer(events, OutputArea) {\n",
       "\n",
       "    function append_mime(data, metadata, element) {\n",
       "      // create a DOM node to render to\n",
       "      var toinsert = this.create_output_subarea(\n",
       "        metadata,\n",
       "        CLASS_NAME,\n",
       "        EXEC_MIME_TYPE\n",
       "      );\n",
       "      this.keyboard_manager.register_events(toinsert);\n",
       "      // Render to node\n",
       "      var props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};\n",
       "      render(props, toinsert[toinsert.length - 1]);\n",
       "      element.append(toinsert);\n",
       "      return toinsert\n",
       "    }\n",
       "\n",
       "    /* Handle when an output is cleared or removed */\n",
       "    events.on('clear_output.CodeCell', handleClearOutput);\n",
       "    events.on('delete.Cell', handleClearOutput);\n",
       "\n",
       "    /* Handle when a new output is added */\n",
       "    events.on('output_added.OutputArea', handleAddOutput);\n",
       "\n",
       "    /**\n",
       "     * Register the mime type and append_mime function with output_area\n",
       "     */\n",
       "    OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n",
       "      /* Is output safe? */\n",
       "      safe: true,\n",
       "      /* Index of renderer in `output_area.display_order` */\n",
       "      index: 0\n",
       "    });\n",
       "  }\n",
       "\n",
       "  // register the mime type if in Jupyter Notebook environment and previously unregistered\n",
       "  if (root.Jupyter !== undefined) {\n",
       "    var events = require('base/js/events');\n",
       "    var OutputArea = require('notebook/js/outputarea').OutputArea;\n",
       "\n",
       "    if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n",
       "      register_renderer(events, OutputArea);\n",
       "    }\n",
       "  }\n",
       "\n",
       "  \n",
       "  if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n",
       "    root._bokeh_timeout = Date.now() + 5000;\n",
       "    root._bokeh_failed_load = false;\n",
       "  }\n",
       "\n",
       "  var NB_LOAD_WARNING = {'data': {'text/html':\n",
       "     \"<div style='background-color: #fdd'>\\n\"+\n",
       "     \"<p>\\n\"+\n",
       "     \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n",
       "     \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n",
       "     \"</p>\\n\"+\n",
       "     \"<ul>\\n\"+\n",
       "     \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n",
       "     \"<li>use INLINE resources instead, as so:</li>\\n\"+\n",
       "     \"</ul>\\n\"+\n",
       "     \"<code>\\n\"+\n",
       "     \"from bokeh.resources import INLINE\\n\"+\n",
       "     \"output_notebook(resources=INLINE)\\n\"+\n",
       "     \"</code>\\n\"+\n",
       "     \"</div>\"}};\n",
       "\n",
       "  function display_loaded() {\n",
       "    var el = document.getElementById(\"1108\");\n",
       "    if (el != null) {\n",
       "      el.textContent = \"BokehJS is loading...\";\n",
       "    }\n",
       "    if (root.Bokeh !== undefined) {\n",
       "      if (el != null) {\n",
       "        el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n",
       "      }\n",
       "    } else if (Date.now() < root._bokeh_timeout) {\n",
       "      setTimeout(display_loaded, 100)\n",
       "    }\n",
       "  }\n",
       "\n",
       "\n",
       "  function run_callbacks() {\n",
       "    try {\n",
       "      root._bokeh_onload_callbacks.forEach(function(callback) {\n",
       "        if (callback != null)\n",
       "          callback();\n",
       "      });\n",
       "    } finally {\n",
       "      delete root._bokeh_onload_callbacks\n",
       "    }\n",
       "    console.debug(\"Bokeh: all callbacks have finished\");\n",
       "  }\n",
       "\n",
       "  function load_libs(css_urls, js_urls, callback) {\n",
       "    if (css_urls == null) css_urls = [];\n",
       "    if (js_urls == null) js_urls = [];\n",
       "\n",
       "    root._bokeh_onload_callbacks.push(callback);\n",
       "    if (root._bokeh_is_loading > 0) {\n",
       "      console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n",
       "      return null;\n",
       "    }\n",
       "    if (js_urls == null || js_urls.length === 0) {\n",
       "      run_callbacks();\n",
       "      return null;\n",
       "    }\n",
       "    console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n",
       "    root._bokeh_is_loading = css_urls.length + js_urls.length;\n",
       "\n",
       "    function on_load() {\n",
       "      root._bokeh_is_loading--;\n",
       "      if (root._bokeh_is_loading === 0) {\n",
       "        console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n",
       "        run_callbacks()\n",
       "      }\n",
       "    }\n",
       "\n",
       "    function on_error() {\n",
       "      console.error(\"failed to load \" + url);\n",
       "    }\n",
       "\n",
       "    for (var i = 0; i < css_urls.length; i++) {\n",
       "      var url = css_urls[i];\n",
       "      const element = document.createElement(\"link\");\n",
       "      element.onload = on_load;\n",
       "      element.onerror = on_error;\n",
       "      element.rel = \"stylesheet\";\n",
       "      element.type = \"text/css\";\n",
       "      element.href = url;\n",
       "      console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n",
       "      document.body.appendChild(element);\n",
       "    }\n",
       "\n",
       "    for (var i = 0; i < js_urls.length; i++) {\n",
       "      var url = js_urls[i];\n",
       "      var element = document.createElement('script');\n",
       "      element.onload = on_load;\n",
       "      element.onerror = on_error;\n",
       "      element.async = false;\n",
       "      element.src = url;\n",
       "      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n",
       "      document.head.appendChild(element);\n",
       "    }\n",
       "  };var element = document.getElementById(\"1108\");\n",
       "  if (element == null) {\n",
       "    console.error(\"Bokeh: ERROR: autoload.js configured with elementid '1108' but no matching script tag was found. \")\n",
       "    return false;\n",
       "  }\n",
       "\n",
       "  function inject_raw_css(css) {\n",
       "    const element = document.createElement(\"style\");\n",
       "    element.appendChild(document.createTextNode(css));\n",
       "    document.body.appendChild(element);\n",
       "  }\n",
       "\n",
       "  var js_urls = [\"https://cdn.pydata.org/bokeh/release/bokeh-1.3.4.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-widgets-1.3.4.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-tables-1.3.4.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-gl-1.3.4.min.js\"];\n",
       "  var css_urls = [];\n",
       "\n",
       "  var inline_js = [\n",
       "    function(Bokeh) {\n",
       "      Bokeh.set_log_level(\"info\");\n",
       "    },\n",
       "    \n",
       "    function(Bokeh) {\n",
       "      \n",
       "    },\n",
       "    function(Bokeh) {} // ensure no trailing comma for IE\n",
       "  ];\n",
       "\n",
       "  function run_inline_js() {\n",
       "    \n",
       "    if ((root.Bokeh !== undefined) || (force === true)) {\n",
       "      for (var i = 0; i < inline_js.length; i++) {\n",
       "        inline_js[i].call(root, root.Bokeh);\n",
       "      }if (force === true) {\n",
       "        display_loaded();\n",
       "      }} else if (Date.now() < root._bokeh_timeout) {\n",
       "      setTimeout(run_inline_js, 100);\n",
       "    } else if (!root._bokeh_failed_load) {\n",
       "      console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n",
       "      root._bokeh_failed_load = true;\n",
       "    } else if (force !== true) {\n",
       "      var cell = $(document.getElementById(\"1108\")).parents('.cell').data().cell;\n",
       "      cell.output_area.append_execute_result(NB_LOAD_WARNING)\n",
       "    }\n",
       "\n",
       "  }\n",
       "\n",
       "  if (root._bokeh_is_loading === 0) {\n",
       "    console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n",
       "    run_inline_js();\n",
       "  } else {\n",
       "    load_libs(css_urls, js_urls, function() {\n",
       "      console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n",
       "      run_inline_js();\n",
       "    });\n",
       "  }\n",
       "}(window));"
      ],
      "application/vnd.bokehjs_load.v0+json": "\n(function(root) {\n  function now() {\n    return new Date();\n  }\n\n  var force = true;\n\n  if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n    root._bokeh_onload_callbacks = [];\n    root._bokeh_is_loading = undefined;\n  }\n\n  \n\n  \n  if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n    root._bokeh_timeout = Date.now() + 5000;\n    root._bokeh_failed_load = false;\n  }\n\n  var NB_LOAD_WARNING = {'data': {'text/html':\n     \"<div style='background-color: #fdd'>\\n\"+\n     \"<p>\\n\"+\n     \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n     \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n     \"</p>\\n\"+\n     \"<ul>\\n\"+\n     \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n     \"<li>use INLINE resources instead, as so:</li>\\n\"+\n     \"</ul>\\n\"+\n     \"<code>\\n\"+\n     \"from bokeh.resources import INLINE\\n\"+\n     \"output_notebook(resources=INLINE)\\n\"+\n     \"</code>\\n\"+\n     \"</div>\"}};\n\n  function display_loaded() {\n    var el = document.getElementById(\"1108\");\n    if (el != null) {\n      el.textContent = \"BokehJS is loading...\";\n    }\n    if (root.Bokeh !== undefined) {\n      if (el != null) {\n        el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n      }\n    } else if (Date.now() < root._bokeh_timeout) {\n      setTimeout(display_loaded, 100)\n    }\n  }\n\n\n  function run_callbacks() {\n    try {\n      root._bokeh_onload_callbacks.forEach(function(callback) {\n        if (callback != null)\n          callback();\n      });\n    } finally {\n      delete root._bokeh_onload_callbacks\n    }\n    console.debug(\"Bokeh: all callbacks have finished\");\n  }\n\n  function load_libs(css_urls, js_urls, callback) {\n    if (css_urls == null) css_urls = [];\n    if (js_urls == null) js_urls = [];\n\n    root._bokeh_onload_callbacks.push(callback);\n    if (root._bokeh_is_loading > 0) {\n      console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n      return null;\n    }\n    if (js_urls == null || js_urls.length === 0) {\n      run_callbacks();\n      return null;\n    }\n    console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n    root._bokeh_is_loading = css_urls.length + js_urls.length;\n\n    function on_load() {\n      root._bokeh_is_loading--;\n      if (root._bokeh_is_loading === 0) {\n        console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n        run_callbacks()\n      }\n    }\n\n    function on_error() {\n      console.error(\"failed to load \" + url);\n    }\n\n    for (var i = 0; i < css_urls.length; i++) {\n      var url = css_urls[i];\n      const element = document.createElement(\"link\");\n      element.onload = on_load;\n      element.onerror = on_error;\n      element.rel = \"stylesheet\";\n      element.type = \"text/css\";\n      element.href = url;\n      console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n      document.body.appendChild(element);\n    }\n\n    for (var i = 0; i < js_urls.length; i++) {\n      var url = js_urls[i];\n      var element = document.createElement('script');\n      element.onload = on_load;\n      element.onerror = on_error;\n      element.async = false;\n      element.src = url;\n      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n      document.head.appendChild(element);\n    }\n  };var element = document.getElementById(\"1108\");\n  if (element == null) {\n    console.error(\"Bokeh: ERROR: autoload.js configured with elementid '1108' but no matching script tag was found. \")\n    return false;\n  }\n\n  function inject_raw_css(css) {\n    const element = document.createElement(\"style\");\n    element.appendChild(document.createTextNode(css));\n    document.body.appendChild(element);\n  }\n\n  var js_urls = [\"https://cdn.pydata.org/bokeh/release/bokeh-1.3.4.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-widgets-1.3.4.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-tables-1.3.4.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-gl-1.3.4.min.js\"];\n  var css_urls = [];\n\n  var inline_js = [\n    function(Bokeh) {\n      Bokeh.set_log_level(\"info\");\n    },\n    \n    function(Bokeh) {\n      \n    },\n    function(Bokeh) {} // ensure no trailing comma for IE\n  ];\n\n  function run_inline_js() {\n    \n    if ((root.Bokeh !== undefined) || (force === true)) {\n      for (var i = 0; i < inline_js.length; i++) {\n        inline_js[i].call(root, root.Bokeh);\n      }if (force === true) {\n        display_loaded();\n      }} else if (Date.now() < root._bokeh_timeout) {\n      setTimeout(run_inline_js, 100);\n    } else if (!root._bokeh_failed_load) {\n      console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n      root._bokeh_failed_load = true;\n    } else if (force !== true) {\n      var cell = $(document.getElementById(\"1108\")).parents('.cell').data().cell;\n      cell.output_area.append_execute_result(NB_LOAD_WARNING)\n    }\n\n  }\n\n  if (root._bokeh_is_loading === 0) {\n    console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n    run_inline_js();\n  } else {\n    load_libs(css_urls, js_urls, function() {\n      console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n      run_inline_js();\n    });\n  }\n}(window));"
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from bokeh.plotting import figure,output_notebook,show\n",
    "output_notebook()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "  <div class=\"bk-root\" id=\"61c87b2d-28cf-4653-bb8f-c44f432d7b53\" data-root-id=\"1109\"></div>\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "(function(root) {\n",
       "  function embed_document(root) {\n",
       "    \n",
       "  var docs_json = {\"9ebe81d9-60cd-4621-8cc0-d08cc622049b\":{\"roots\":{\"references\":[{\"attributes\":{\"below\":[{\"id\":\"1120\",\"type\":\"LinearAxis\"}],\"center\":[{\"id\":\"1124\",\"type\":\"Grid\"},{\"id\":\"1129\",\"type\":\"Grid\"},{\"id\":\"1154\",\"type\":\"Legend\"}],\"left\":[{\"id\":\"1125\",\"type\":\"LinearAxis\"}],\"plot_height\":400,\"plot_width\":400,\"renderers\":[{\"id\":\"1146\",\"type\":\"GlyphRenderer\"}],\"title\":{\"id\":\"1110\",\"type\":\"Title\"},\"toolbar\":{\"id\":\"1136\",\"type\":\"Toolbar\"},\"x_range\":{\"id\":\"1112\",\"type\":\"DataRange1d\"},\"x_scale\":{\"id\":\"1116\",\"type\":\"LinearScale\"},\"y_range\":{\"id\":\"1114\",\"type\":\"DataRange1d\"},\"y_scale\":{\"id\":\"1118\",\"type\":\"LinearScale\"}},\"id\":\"1109\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{\"source\":{\"id\":\"1143\",\"type\":\"ColumnDataSource\"}},\"id\":\"1147\",\"type\":\"CDSView\"},{\"attributes\":{\"active_drag\":\"auto\",\"active_inspect\":\"auto\",\"active_multi\":null,\"active_scroll\":\"auto\",\"active_tap\":\"auto\",\"tools\":[{\"id\":\"1130\",\"type\":\"PanTool\"},{\"id\":\"1131\",\"type\":\"WheelZoomTool\"},{\"id\":\"1132\",\"type\":\"BoxZoomTool\"},{\"id\":\"1133\",\"type\":\"SaveTool\"},{\"id\":\"1134\",\"type\":\"ResetTool\"},{\"id\":\"1135\",\"type\":\"HelpTool\"}]},\"id\":\"1136\",\"type\":\"Toolbar\"},{\"attributes\":{},\"id\":\"1134\",\"type\":\"ResetTool\"},{\"attributes\":{\"ticker\":{\"id\":\"1121\",\"type\":\"BasicTicker\"}},\"id\":\"1124\",\"type\":\"Grid\"},{\"attributes\":{},\"id\":\"1133\",\"type\":\"SaveTool\"},{\"attributes\":{\"data_source\":{\"id\":\"1143\",\"type\":\"ColumnDataSource\"},\"glyph\":{\"id\":\"1144\",\"type\":\"Line\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"1145\",\"type\":\"Line\"},\"selection_glyph\":null,\"view\":{\"id\":\"1147\",\"type\":\"CDSView\"}},\"id\":\"1146\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"callback\":null},\"id\":\"1112\",\"type\":\"DataRange1d\"},{\"attributes\":{\"items\":[{\"id\":\"1155\",\"type\":\"LegendItem\"}]},\"id\":\"1154\",\"type\":\"Legend\"},{\"attributes\":{},\"id\":\"1152\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"axis_label\":\"x\",\"formatter\":{\"id\":\"1150\",\"type\":\"BasicTickFormatter\"},\"ticker\":{\"id\":\"1121\",\"type\":\"BasicTicker\"}},\"id\":\"1120\",\"type\":\"LinearAxis\"},{\"attributes\":{},\"id\":\"1116\",\"type\":\"LinearScale\"},{\"attributes\":{},\"id\":\"1118\",\"type\":\"LinearScale\"},{\"attributes\":{\"text\":\"line example\"},\"id\":\"1110\",\"type\":\"Title\"},{\"attributes\":{},\"id\":\"1126\",\"type\":\"BasicTicker\"},{\"attributes\":{\"line_color\":\"#1f77b4\",\"line_width\":2,\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"1144\",\"type\":\"Line\"},{\"attributes\":{},\"id\":\"1170\",\"type\":\"Selection\"},{\"attributes\":{},\"id\":\"1150\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{},\"id\":\"1135\",\"type\":\"HelpTool\"},{\"attributes\":{\"overlay\":{\"id\":\"1153\",\"type\":\"BoxAnnotation\"}},\"id\":\"1132\",\"type\":\"BoxZoomTool\"},{\"attributes\":{},\"id\":\"1130\",\"type\":\"PanTool\"},{\"attributes\":{\"bottom_units\":\"screen\",\"fill_alpha\":{\"value\":0.5},\"fill_color\":{\"value\":\"lightgrey\"},\"left_units\":\"screen\",\"level\":\"overlay\",\"line_alpha\":{\"value\":1.0},\"line_color\":{\"value\":\"black\"},\"line_dash\":[4,4],\"line_width\":{\"value\":2},\"render_mode\":\"css\",\"right_units\":\"screen\",\"top_units\":\"screen\"},\"id\":\"1153\",\"type\":\"BoxAnnotation\"},{\"attributes\":{\"callback\":null,\"data\":{\"x\":[1,2,3,4,5,6,7],\"y\":[6,7,2,4,5,10,4]},\"selected\":{\"id\":\"1170\",\"type\":\"Selection\"},\"selection_policy\":{\"id\":\"1169\",\"type\":\"UnionRenderers\"}},\"id\":\"1143\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"label\":{\"value\":\"Temp.\"},\"renderers\":[{\"id\":\"1146\",\"type\":\"GlyphRenderer\"}]},\"id\":\"1155\",\"type\":\"LegendItem\"},{\"attributes\":{\"line_alpha\":0.1,\"line_color\":\"#1f77b4\",\"line_width\":2,\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"1145\",\"type\":\"Line\"},{\"attributes\":{},\"id\":\"1131\",\"type\":\"WheelZoomTool\"},{\"attributes\":{\"callback\":null},\"id\":\"1114\",\"type\":\"DataRange1d\"},{\"attributes\":{\"dimension\":1,\"ticker\":{\"id\":\"1126\",\"type\":\"BasicTicker\"}},\"id\":\"1129\",\"type\":\"Grid\"},{\"attributes\":{\"axis_label\":\"y\",\"formatter\":{\"id\":\"1152\",\"type\":\"BasicTickFormatter\"},\"ticker\":{\"id\":\"1126\",\"type\":\"BasicTicker\"}},\"id\":\"1125\",\"type\":\"LinearAxis\"},{\"attributes\":{},\"id\":\"1121\",\"type\":\"BasicTicker\"},{\"attributes\":{},\"id\":\"1169\",\"type\":\"UnionRenderers\"}],\"root_ids\":[\"1109\"]},\"title\":\"Bokeh Application\",\"version\":\"1.3.4\"}};\n",
       "  var render_items = [{\"docid\":\"9ebe81d9-60cd-4621-8cc0-d08cc622049b\",\"roots\":{\"1109\":\"61c87b2d-28cf-4653-bb8f-c44f432d7b53\"}}];\n",
       "  root.Bokeh.embed.embed_items_notebook(docs_json, render_items);\n",
       "\n",
       "  }\n",
       "  if (root.Bokeh !== undefined) {\n",
       "    embed_document(root);\n",
       "  } else {\n",
       "    var attempts = 0;\n",
       "    var timer = setInterval(function(root) {\n",
       "      if (root.Bokeh !== undefined) {\n",
       "        embed_document(root);\n",
       "        clearInterval(timer);\n",
       "      }\n",
       "      attempts++;\n",
       "      if (attempts > 100) {\n",
       "        console.log(\"Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing\");\n",
       "        clearInterval(timer);\n",
       "      }\n",
       "    }, 10, root)\n",
       "  }\n",
       "})(window);"
      ],
      "application/vnd.bokehjs_exec.v0+json": ""
     },
     "metadata": {
      "application/vnd.bokehjs_exec.v0+json": {
       "id": "1109"
      }
     },
     "output_type": "display_data"
    }
   ],
   "source": [
    "# 数据\n",
    "x = [1, 2, 3, 4, 5, 6, 7]\n",
    "y = [6, 7, 2, 4, 5, 10, 4]\n",
    "# 画布：坐标轴标签，画布大小\n",
    "p = figure(title=\"line example\", x_axis_label='x', y_axis_label='y', width=400, height=400)\n",
    "# 画图：数据、图例、线宽\n",
    "p.line(x, y, legend=\"Temp.\", line_width=2)  # 折线\n",
    "# 显示\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "  <div class=\"bk-root\" id=\"02aa70d4-9b14-460e-b417-9ba6f48052e9\" data-root-id=\"1220\"></div>\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "(function(root) {\n",
       "  function embed_document(root) {\n",
       "    \n",
       "  var docs_json = {\"1de4b369-6914-4e84-94ea-5b0b91b5b966\":{\"roots\":{\"references\":[{\"attributes\":{\"below\":[{\"id\":\"1229\",\"type\":\"LinearAxis\"}],\"center\":[{\"id\":\"1233\",\"type\":\"Grid\"},{\"id\":\"1238\",\"type\":\"Grid\"}],\"left\":[{\"id\":\"1234\",\"type\":\"LinearAxis\"}],\"plot_height\":400,\"plot_width\":400,\"renderers\":[{\"id\":\"1255\",\"type\":\"GlyphRenderer\"}],\"title\":{\"id\":\"1274\",\"type\":\"Title\"},\"toolbar\":{\"id\":\"1245\",\"type\":\"Toolbar\"},\"x_range\":{\"id\":\"1221\",\"type\":\"DataRange1d\"},\"x_scale\":{\"id\":\"1225\",\"type\":\"LinearScale\"},\"y_range\":{\"id\":\"1223\",\"type\":\"DataRange1d\"},\"y_scale\":{\"id\":\"1227\",\"type\":\"LinearScale\"}},\"id\":\"1220\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{\"data_source\":{\"id\":\"1252\",\"type\":\"ColumnDataSource\"},\"glyph\":{\"id\":\"1253\",\"type\":\"MultiLine\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"1254\",\"type\":\"MultiLine\"},\"selection_glyph\":null,\"view\":{\"id\":\"1256\",\"type\":\"CDSView\"}},\"id\":\"1255\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"callback\":null},\"id\":\"1221\",\"type\":\"DataRange1d\"},{\"attributes\":{},\"id\":\"1240\",\"type\":\"WheelZoomTool\"},{\"attributes\":{\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"#1f77b4\"},\"line_width\":{\"value\":4},\"xs\":{\"field\":\"xs\"},\"ys\":{\"field\":\"ys\"}},\"id\":\"1254\",\"type\":\"MultiLine\"},{\"attributes\":{\"callback\":null},\"id\":\"1223\",\"type\":\"DataRange1d\"},{\"attributes\":{},\"id\":\"1276\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{},\"id\":\"1239\",\"type\":\"PanTool\"},{\"attributes\":{},\"id\":\"1225\",\"type\":\"LinearScale\"},{\"attributes\":{\"ticker\":{\"id\":\"1230\",\"type\":\"BasicTicker\"}},\"id\":\"1233\",\"type\":\"Grid\"},{\"attributes\":{\"formatter\":{\"id\":\"1276\",\"type\":\"BasicTickFormatter\"},\"ticker\":{\"id\":\"1230\",\"type\":\"BasicTicker\"}},\"id\":\"1229\",\"type\":\"LinearAxis\"},{\"attributes\":{\"bottom_units\":\"screen\",\"fill_alpha\":{\"value\":0.5},\"fill_color\":{\"value\":\"lightgrey\"},\"left_units\":\"screen\",\"level\":\"overlay\",\"line_alpha\":{\"value\":1.0},\"line_color\":{\"value\":\"black\"},\"line_dash\":[4,4],\"line_width\":{\"value\":2},\"render_mode\":\"css\",\"right_units\":\"screen\",\"top_units\":\"screen\"},\"id\":\"1281\",\"type\":\"BoxAnnotation\"},{\"attributes\":{},\"id\":\"1230\",\"type\":\"BasicTicker\"},{\"attributes\":{\"overlay\":{\"id\":\"1281\",\"type\":\"BoxAnnotation\"}},\"id\":\"1241\",\"type\":\"BoxZoomTool\"},{\"attributes\":{\"line_alpha\":{\"field\":\"line_alpha\"},\"line_color\":{\"field\":\"line_color\"},\"line_width\":{\"value\":4},\"xs\":{\"field\":\"xs\"},\"ys\":{\"field\":\"ys\"}},\"id\":\"1253\",\"type\":\"MultiLine\"},{\"attributes\":{},\"id\":\"1244\",\"type\":\"HelpTool\"},{\"attributes\":{\"formatter\":{\"id\":\"1278\",\"type\":\"BasicTickFormatter\"},\"ticker\":{\"id\":\"1235\",\"type\":\"BasicTicker\"}},\"id\":\"1234\",\"type\":\"LinearAxis\"},{\"attributes\":{\"dimension\":1,\"ticker\":{\"id\":\"1235\",\"type\":\"BasicTicker\"}},\"id\":\"1238\",\"type\":\"Grid\"},{\"attributes\":{\"text\":\"\"},\"id\":\"1274\",\"type\":\"Title\"},{\"attributes\":{},\"id\":\"1243\",\"type\":\"ResetTool\"},{\"attributes\":{\"active_drag\":\"auto\",\"active_inspect\":\"auto\",\"active_multi\":null,\"active_scroll\":\"auto\",\"active_tap\":\"auto\",\"tools\":[{\"id\":\"1239\",\"type\":\"PanTool\"},{\"id\":\"1240\",\"type\":\"WheelZoomTool\"},{\"id\":\"1241\",\"type\":\"BoxZoomTool\"},{\"id\":\"1242\",\"type\":\"SaveTool\"},{\"id\":\"1243\",\"type\":\"ResetTool\"},{\"id\":\"1244\",\"type\":\"HelpTool\"}]},\"id\":\"1245\",\"type\":\"Toolbar\"},{\"attributes\":{},\"id\":\"1280\",\"type\":\"Selection\"},{\"attributes\":{},\"id\":\"1227\",\"type\":\"LinearScale\"},{\"attributes\":{\"source\":{\"id\":\"1252\",\"type\":\"ColumnDataSource\"}},\"id\":\"1256\",\"type\":\"CDSView\"},{\"attributes\":{},\"id\":\"1278\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{},\"id\":\"1235\",\"type\":\"BasicTicker\"},{\"attributes\":{\"callback\":null,\"data\":{\"line_alpha\":[0.8,0.3],\"line_color\":[\"firebrick\",\"navy\"],\"xs\":[[1,3,2],[3,4,6,6]],\"ys\":[[2,1,4],[4,7,8,5]]},\"selected\":{\"id\":\"1280\",\"type\":\"Selection\"},\"selection_policy\":{\"id\":\"1279\",\"type\":\"UnionRenderers\"}},\"id\":\"1252\",\"type\":\"ColumnDataSource\"},{\"attributes\":{},\"id\":\"1279\",\"type\":\"UnionRenderers\"},{\"attributes\":{},\"id\":\"1242\",\"type\":\"SaveTool\"}],\"root_ids\":[\"1220\"]},\"title\":\"Bokeh Application\",\"version\":\"1.3.4\"}};\n",
       "  var render_items = [{\"docid\":\"1de4b369-6914-4e84-94ea-5b0b91b5b966\",\"roots\":{\"1220\":\"02aa70d4-9b14-460e-b417-9ba6f48052e9\"}}];\n",
       "  root.Bokeh.embed.embed_items_notebook(docs_json, render_items);\n",
       "\n",
       "  }\n",
       "  if (root.Bokeh !== undefined) {\n",
       "    embed_document(root);\n",
       "  } else {\n",
       "    var attempts = 0;\n",
       "    var timer = setInterval(function(root) {\n",
       "      if (root.Bokeh !== undefined) {\n",
       "        embed_document(root);\n",
       "        clearInterval(timer);\n",
       "      }\n",
       "      attempts++;\n",
       "      if (attempts > 100) {\n",
       "        console.log(\"Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing\");\n",
       "        clearInterval(timer);\n",
       "      }\n",
       "    }, 10, root)\n",
       "  }\n",
       "})(window);"
      ],
      "application/vnd.bokehjs_exec.v0+json": ""
     },
     "metadata": {
      "application/vnd.bokehjs_exec.v0+json": {
       "id": "1220"
      }
     },
     "output_type": "display_data"
    }
   ],
   "source": [
    "p = figure(plot_width=400, plot_height=400)\n",
    "# 线段x,y位置点为列表；两段线的颜色、透明度、线宽\n",
    "p.multi_line([[1, 3, 2], [3, 4, 6, 6]], [[2, 1, 4], [4, 7, 8, 5]],\n",
    "             color=[\"firebrick\", \"navy\"], alpha=[0.8, 0.3], line_width=4)\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
